.SaveChangesPanel {
    position: fixed;
    z-index: 1000;
    display: flex;
    width: calc(63%);
    align-items: center;
    align-self: center;
    padding: 12px;
    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
    border-radius: 4px;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-name: entry-animation;
    animation-timing-function: ease;
    background: var(--center-channel-bg);
    box-shadow: var(--elevation-3);
    font-family: 'Open Sans', sans-serif;
    transition: all 300ms ease;

    @keyframes entry-animation {
        from {
            bottom: 0;
        }

        to {
            bottom: 20px;
        }
    }

    @media screen and (max-width: 768px) {
        width: calc(95%);
    }

    &.error {
        border-color: var(--dnd-indicator);
        background: var(--dnd-indicator);
    }

    &.saved {
        border-color: var(--online-indicator);
        background: var(--online-indicator);
    }

    &__message {
        display: flex;
        align-items: center;
        margin: 0;
        color: var(--center-channel-color);
        font-family: inherit;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;

        span {
            margin-left: 8px;
        }

        svg {
            margin-right: 10px;
            color: rgba(var(--center-channel-color-rgb), 0.56);
        }

        &.error,
        &.saved {
            color: var(--button-color);

            svg {
                color: var(--button-color);
            }
        }
    }

    &__btn-ctr {
        display: flex;
        flex: 1 1 auto;
        justify-content: flex-end;

        #panelCloseButton {
            color: rgba(var(--button-color-rgb), 0.64);
            font-size: 16px;
        }
    }

    &__cancel-btn {
        &.btn {
            &.error {
                background: rgba(var(--button-color-rgb), 0.12);
                color: var(--button-color);

                &:hover {
                    background-color: rgba(var(--button-color-rgb), 0.16);
                }
            }
        }
    }

    &__save-btn {
        &.btn {
            &.error {
                background-color: var(--button-color);
                color: var(--dnd-indicator);

                &:hover {
                    background-color: rgba(var(--button-color-rgb), 0.9);
                }

                &:disabled {
                    background: rgba(var(--button-color-rgb), 0.16); 
                }
            }
        }   
    }
}
